<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setAttribute("STATIC","../static");%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8" />
		<meta name="keywords" content="Bootstrap模版,Bootstrap模版下载,Bootstrap教程,Bootstrap中文" />
		<meta name="description" content="JS代码网提供Bootstrap模版,Bootstrap教程,Bootstrap中文翻译等相关Bootstrap插件下载" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>${WEB_TITLE eq null?"ThinkSSM后台管理系统":WEB_TITLE}</title>
<link href="${STATIC}/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${STATIC}/css/font-awesome.min.css" />
<link rel="stylesheet" href="${STATIC}/css/ace.min.css" />
<link rel="stylesheet" href="${STATIC}/css/ace-rtl.min.css" />
</head>
<body class="login-layout">
	<div class="main-container">
		<div class="main-content">
			<div class="row">
				<div class="col-sm-10 col-sm-offset-1">
					<div class="login-container">
						<div class="center">
							<h1>
								<i class="icon-leaf green"></i>
								<span class="red">Ace</span>
								<span class="white">Application</span>
							</h1>
							<h4 class="blue">&copy; Company Name</h4>
						</div>
	
						<div class="space-6"></div>
	
						<div class="position-relative">
							<div id="login-box" class="login-box visible widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header blue lighter bigger">
											<i class="icon-coffee green"></i>
											Please Enter Your Information
										</h4>
	
										<div class="space-6"></div>
	
										<form method="POST" action="login">
											<fieldset>
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" class="form-control" name="username" placeholder="username" />
														<i class="icon-user"></i>
													</span>
												</label>
	
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="password" class="form-control" name="password" placeholder="password" />
														<i class="icon-lock"></i>
													</span>
												</label>
												
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input id="index_code" name="code" type="text" />
														<img id="imgObj" alt="验证码" src="../Usercode/code" />
												 		<a href="#" onclick="changeImg()">换一张</a>
													</span>
												</label>
												
	
												<div class="space"></div>
	
												<div class="clearfix">
													<label class="inline">
														<input type="checkbox" name="remember" value=1 class="ace"  />
														<span class="lbl"> Remember Me</span>
													</label>
	
													<button type="submit" class="width-35 pull-right btn btn-sm btn-primary">
														<i class="icon-key"></i>
														Login
													</button>
												</div>
	
												<div class="space-4"></div>
											</fieldset>
										</form>
	
										<div class="social-or-login center">
											<span class="bigger-110">Or Login Using</span>
										</div>
	
										<div class="social-login center">
											<a class="btn btn-primary">
												<i class="icon-facebook"></i>
											</a>
	
											<a class="btn btn-info">
												<i class="icon-twitter"></i>
											</a>
	
											<a class="btn btn-danger">
												<i class="icon-google-plus"></i>
											</a>
										</div>
									</div><!-- /widget-main -->
	
									<div class="toolbar clearfix">
										<div>
											<a href="#" onclick="show_box('forgot-box'); return false;" class="forgot-password-link">
												<i class="icon-arrow-left"></i>
												I forgot my password
											</a>
										</div>
	
										<div>
											<a href="#" onclick="show_box('signup-box'); return false;" class="user-signup-link">
												I want to register
												<i class="icon-arrow-right"></i>
											</a>
										</div>
									</div>
								</div><!-- /widget-body -->
							</div><!-- /login-box -->
	
							<div id="forgot-box" class="forgot-box widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header red lighter bigger">
											<i class="icon-key"></i>
											Retrieve Password
										</h4>
	
										<div class="space-6"></div>
										<p>
											Enter your email and to receive instructions
										</p>
	
										<form>
											<fieldset>
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="email" class="form-control" placeholder="Email" />
														<i class="icon-envelope"></i>
													</span>
												</label>
	
												<div class="clearfix">
													<button type="button" class="width-35 pull-right btn btn-sm btn-danger">
														<i class="icon-lightbulb"></i>
														Send Me!
													</button>
												</div>
											</fieldset>
										</form>
									</div><!-- /widget-main -->
	
									<div class="toolbar center">
										<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
											Back to login
											<i class="icon-arrow-right"></i>
										</a>
									</div>
								</div><!-- /widget-body -->
							</div><!-- /forgot-box -->
	
							<div id="signup-box" class="signup-box widget-box no-border">
								<div class="widget-body">
									<div class="widget-main">
										<h4 class="header green lighter bigger">
											<i class="icon-group blue"></i>
											New User Registration
										</h4>
	
										<div class="space-6"></div>
										<p> Enter your details to begin: </p>
	
										<form id="validation-form" action="register" method="POST">
											<fieldset>
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" name="username" class="form-control"  placeholder="username" />
														<i class="icon-user"></i>
													</span>
												</label>
	
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="password" name="password" class="form-control" placeholder="password" />
														<i class="icon-lock"></i>
													</span>
												</label>
	
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" name="name"  class="form-control" placeholder="真实姓名" />
														<i class="icon-user"></i>
													</span>
												</label>
												
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" name="age"  class="form-control" placeholder="age" />
														<i class="icon-retweet"></i>
													</span>
												</label>
	
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" name="idcard"  class="form-control" placeholder="身份证号" />
														<i class="icon-retweet"></i>
													</span>
												</label>
												
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input  type="text" name="tel"  value="${userinfo.tel}" class="form-control" placeholder="电话号码" />
														<i class="icon-retweet"></i>
													</span>
												</label>
												
												<label class="block clearfix">
													<span class="block input-icon input-icon-right">
														<input type="text" name="qq"  value="${userinfo.qq}" class="form-control" placeholder="qq" />
														<i class="icon-retweet"></i>
													</span>
												</label>
	
												<label class="block">
													<input type="checkbox" class="ace" />
													<span class="lbl">
														I accept the
														<a href="#">User Agreement</a>
													</span>
												</label>
	
												<div class="space-24"></div>
	
												<div class="clearfix">
													<button type="reset" class="width-30 pull-left btn btn-sm">
														<i class="icon-refresh"></i>
														Reset
													</button>
	
													<button type="submit" class="width-65 pull-right btn btn-sm btn-success">
														Register
														<i class="icon-arrow-right icon-on-right"></i>
													</button>
													
												</div>
											</fieldset>
										</form>
									</div>
	
									<div class="toolbar center">
										<a href="#" onclick="show_box('login-box'); return false;" class="back-to-login-link">
											<i class="icon-arrow-left"></i>
											Back to login
										</a>
									</div>
								</div><!-- /widget-body -->
							</div><!-- /signup-box -->
						</div><!-- /position-relative -->
					</div>
				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>
	</div><!-- /.main-container -->

<!-- basic scripts -->

		<!--[if !IE]> -->

		<script src="${STATIC}/js/jquery.min.js"></script>

		<!-- <![endif]-->

		<!--[if IE]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<![endif]-->

		<!--[if !IE]> -->

		<script type="text/javascript">
			window.jQuery || document.write("<script src='${STATIC}/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>

		<!-- <![endif]-->

		<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="${STATIC}/js/jquery.validate.min.js"></script>
<script src="${STATIC}/js/jquery.maskedinput.min.js"></script>
<script src="${STATIC}/js/jquery.autosize.min.js"></script>

		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='${STATIC}/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>

		<!-- inline scripts related to this page -->

		<script type="text/javascript">
		    function changeImg() {
		        var imgSrc = $("#imgObj");
		        var src = imgSrc.attr("src");
		        imgSrc.attr("src", chgUrl(src));
		    }
		    //时间戳   
		    //为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
		    function chgUrl(url) {
		        var timestamp = (new Date()).valueOf();
		        url = url.substring(0, 17);
		        if ((url.indexOf("&") >= 0)) {
		            url = url + "×tamp=" + timestamp;
		        } else {
		            url = url + "?timestamp=" + timestamp;
		        }
		        return url;
		    }
		</script>

		<script type="text/javascript">
			function show_box(id) {
			 jQuery('.widget-box.visible').removeClass('visible');
			 jQuery('#'+id).addClass('visible');
			}
			
			
			jQuery(function($) {
				$('#validation-form').validate({
					errorElement: 'div',
					errorClass: 'help-block',
					focusInvalid: false,
					rules: {
						username: {
							required: true
						},
						password: {
							required: true,
							//minlength: 5
						},
						name: {
							required: true,
							
							//equalTo: "#password"
						},
						age: {
							required: false
						},
						idcard: {
							required: true,
							minlength:18
							//phone: 'required'
						},
						tel: {
							required: true
						},
						qq: {
							required: false
						}
					},
			
					messages: {
						username: {
							required: "modules为必填."
							//,email: "Please provide a valid email."
						},
						password: {
							required: "type为必填."
							//minlength: "Please specify a secure password."
						},
						name: "Please provide a link",
						age: "Please provide a title",
						idcard: "Please provide a status",
						tel: "Please provide a pid"
					},
					invalidHandler: function (event, validator) { //display error alert on form submit   
						$('.alert-danger', $('.login-form')).show();
					},
			
					highlight: function (e) {
						$(e).closest('.form-group').removeClass('has-info').addClass('has-error');
					},
			
					success: function (e) {
						$(e).closest('.form-group').removeClass('has-error').addClass('has-info');
						$(e).remove();
					},
					submitHandler: function (form) {
						form.submit(); 
					},
				});			
			})
		</script>
</body>
</html>